<template>

	<div style="width: 100% ;height: 100%;">
		<div class="video">
			<video id="video" width="100%" height="99%" style="object-fit: cover;" >
			</video>
		</div>


		<!-- <div class="hello" id="hello">
		

		</div> -->
		<canvas id="canvas" style="display: none;"></canvas>
	</div>
</template>

<script>
	export default {

		data() {
			return {

				flag: false,
				mes: null,
				timeoutId: null,
				intervalId2: null

			}
		},
		methods: {

			face() {

				this.$notify({
					type: 'primary',
					message: '请展示完整人脸',
					duration: 4000
				});



				/* this.$toast({
					message: '请展示完整人脸',
					
				}); */

				//访问用户媒体设备的兼容方法
				function getUserMedia(constraints, success, error) {
					if (navigator.mediaDevices.getUserMedia) {
						//最新的标准API
						navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
					} else if (navigator.webkitGetUserMedia) {
						//webkit核心浏览器
						navigator.webkitGetUserMedia(constraints, success, error)
					} else if (navigator.mozGetUserMedia) {
						//firfox浏览器
						navigator.mozGetUserMedia(constraints, success, error);
					} else if (navigator.getUserMedia) {
						//旧版API
						navigator.getUserMedia(constraints, success, error);
					}
				}

				let video = document.getElementById('video');
				let canvas = document.getElementById('canvas');
				let context = canvas.getContext('2d');

				let success = (stream) => {
					//兼容webkit核心浏览器
					let CompatibleURL = window.URL || window.webkitURL;
					//将视频流设置为video元素的源
					console.log(stream);
					video.srcObject = stream;
					video.play();
					const tracks = stream.getTracks();
					//////////////////////////////////////////////////

					this.intervalId2 = setInterval(() => {
						console.log(this.flag);
						if (this.flag) {

							tracks[0].stop();
							clearInterval(this.intervalId2);
						}

					}, 500);
					//////////////////////////////////////////////////
					/* 第一次识别 */

					/* context.drawImage(video, 0, 0, 320, 200);
					let base64Data = canvas.toDataURL(); //转base64
					this.searchFace(base64Data);
					 */

					/* 循环识别 */
					let intervalId = setInterval(() => {

						if (this.flag) {
							clearInterval(intervalId);
						} else {
							context.drawImage(video, 0, 0, 160, 100);
							let base64Data = canvas.toDataURL(); //转base64
							console.log(base64Data);
							this.searchFace(base64Data);
						}
					}, 2000);
					////////////////////////////////////////////////////


					this.timeoutId = setTimeout(() => {
						tracks[0].stop();
						this.$router.push("login");
						clearInterval(intervalId);
						clearInterval(this.intervalId2);//
						
						this.mes = "人脸识别超时！";

						/* this.$notify({
							type: 'primary',
							message: '人脸识别超时！',
							
						}); */

						this.$toast.fail({
							message: '人脸识别超时，未找到人脸！'
						});
						this.$router.push({
							path: '/login',
							query: "未找到人脸"
						});



					}, 8000);
					/////////////////////////////////////
				}

				function error(error) {
					console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
				}


				if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
					//调用用户媒体设备, 访问摄像头
					getUserMedia({
						video: {
							width: 1280,
							height: 800
						}
					}, success, error);
					//getUserMedia({video : {width: 4000, height: 3000}}, success, error);
				} else {
					alert('不支持访问用户媒体');
				}







			},
			searchFace(img) {
				this.axios.post('http://localhost:8088/face/search', {
						'img': img
					})
					.then((response) => {
						if (response.data.result) {
							this.flag = true;
							clearTimeout(this.timeoutId);

							//查找用户
							this.axios.post('https://mianmianshi.com/cms/temple/client/findUser', {

									'where': {
										'id': response.data.result.user_list[0].user_id //暂写
									},

								})
								.then((res) => {


									console.log("res:", res);

									if (res.data.id) {


										this.$toast.success({
											message: '识别成功！'

										});

										this.$store.commit('setUser', res.data) //数据都从仓库中取，以下路由传参方式不用了，为无效代码
										if (res.data.identity == "ADMIN") {
											this.$router.push({
												path: '/adminPage',
												query: res.data
											}); //this.$route.query用这个去接收参数
										} else if (res.data.identity == "CONSUMER") {
											this.$router.push({
												path: '/consumer',
												query: res.data
											}); //this.$route.query用这个去接收参数
										}

									} else {



									}

								})
								.catch(function(error) {
									console.log(error);
								});
							//



						} else {



						}

					})
					.catch(function(error) {
						console.log(error);
					});
			}






		},
		created() {


		},
		mounted() {
  
			this.face();
		}


	}
</script>

<style>
	.video {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		
	}

	
</style>
